import React, { useState } from 'react';
import PubSub from 'pubsub-js';
import CatalogPanel from '@/components/CatalogPanel.js';
import FlexibleLayout, { Content, Sider } from '@/layouts/FlexibleLayout';
import ValidationEditModal from './components/ValidationEditModal';
import useModal from '@/hooks/UseModal';
import ContentPanel from '@/components/ContentPanel';

function ValidationManager() {
  const { hideModal, showModal, data, visible } = useModal();

  return (
    <>
      <FlexibleLayout>
        <Sider>
          <CatalogPanel
            name="校验器"
            code="validation"
            onAddLeaf={parentCatalogId => showModal({ parentCatalogId })}
            onEditLeaf={leaf => showModal(leaf)}
          />
        </Sider>
        <Content>
          <ContentPanel name="校验器" code="validation" />
        </Content>
      </FlexibleLayout>
      <ValidationEditModal
        onOk={() => PubSub.publish('refreshTree')}
        visible={visible}
        onClose={hideModal}
        data={data}
      />
    </>
  );
}

export default ValidationManager;
